import React, { useState, useEffect } from "react";
import { history, connect } from 'umi'
import { Space, Collapse, Button, Row, Col, Dropdown } from 'antd'
import { PlaySquareOutlined, EllipsisOutlined } from '@ant-design/icons'
import FormDirectory from './components/FormDirectory'
import DeleteSection from "./components/DeleteSection";
import TaskDrawer from "./components/TaskDrawer";
import { DemandVideoLink } from '@/common/historyLinkShop'
const { Panel } = Collapse;
const Directory = (props) => {
  const {
    data,
    dispatch,
    confirmLoading
  } = props
  const { id } = data
  const [list, setList] = useState([])
  const [visible, setVisible] = useState(false)
  const [deleteVisible, setDeleteVisible] = useState(false)
  const [taskVisible, setTaskVisible] = useState(false)
  useEffect(() => {
    fetchList()
  }, [])
  const fetchList = () => {
    dispatch({
      type: 'liveStreaming/fetchGoodsContent',
      payload: {
        goodsId: id
      },
      callback: (e) => {
        setList(e)
      }
    })
  }
  const handleUpAudit = (value) => {
    dispatch({
      type: 'liveStreaming/fakeSaveGoodsSection',
      payload: {
        goodsId: id,
        ...value
      },
      callback: (e) => {
        fetchList()
        setVisible(false)
      }
    })
  }
  const TableBlock = ({ item }) => {
    const { goodsName, goodsId } = item
    return <Row style={{
      backgroundColor: '#f7f7f7',
      borderRadius: '3px',
      border: '1px solid #dcdee2',
      display: 'flex',
      alignItems: 'center',
      marginBottom: 12
    }}>
      <Col style={{ paddingLeft: 42, fontSize: 16 }} offset={0} span={16}>
        <PlaySquareOutlined></PlaySquareOutlined>
        <span style={{ paddingLeft: 12 }}>{goodsName}</span>
      </Col>
      <Col style={{ display: 'flex', justifyContent: 'flex-end' }} span={8}>
        <Space>
          <Button onClick={() => dispatch({
            type: 'login/findAccessId',
            payload: {
              pathname: '/marketingModule/createDemandVideo',
              linkPush: 'open',
              query: {
                id: goodsId,
              },
            },
          })} type="link">编辑</Button>
          <Button onClick={() => dispatch({
            type: 'liveStreaming/fakeRemoveGoodsContent',
            payload: {
              id: item.id
            },
            callback: (e) => {
              fetchList()
            }
          })} type="link">取消关联</Button>
        </Space>
      </Col>
    </Row >
  }


  const genExtra = (item) => {
    const items = [
      {
        key: '1',
        label: (
          <Button type='link' onClick={() => setVisible({ show: true, detail: item })}>编辑</Button>
        ),
      },
      {
        key: '2',
        label: (
          <Button type='link' onClick={() => setDeleteVisible({ show: true, detail: item })}>删除</Button>
        ),
      },
    ];
    return <Dropdown
      menu={{
        items,
      }}
      placement="bottomLeft"
      arrow={{
        pointAtCenter: true,
      }}
    >
      <EllipsisOutlined></EllipsisOutlined>
    </Dropdown>
  }
  return (
    <Space direction='vertical' style={{ width: '100%', }}>
      <Space>
        <Button type='primary' onClick={() => setTaskVisible({ show: true })}>添加任务</Button>
        <Button type='default' onClick={() => { setVisible({ show: true, detail: {} }) }}>添加一节</Button>
      </Space>
      {list.map((item, index) => {
        const { sectionName, sectionId, sectionGoodsList = [] } = item
        if (sectionName && sectionId) {
          return <Collapse ghost defaultActiveKey={list.map((panel, s) => s)}>
            <Panel key={index} extra={genExtra(item)} style={{ background: '#f5f5f5', height: '100%', marginBottom: 12 }} key={index} header={<div>{sectionName}<span style={{ color: '#999999' }}>{` (${sectionGoodsList.length}任务)`}</span></div>}>
              {sectionGoodsList.map((val, o) => {
                return <TableBlock key={o} item={val}></TableBlock>
              })}
              <Button onClick={() => setTaskVisible({ show: true, detail: item })} type="primary">添加任务</Button>
            </Panel>
          </Collapse>
        }
        else {
          return <TableBlock item={item}></TableBlock>
        }
      })}

      <FormDirectory confirmLoading={confirmLoading} handleUpData={handleUpAudit} visible={visible} onClose={() => setVisible(false)}></FormDirectory>
      <DeleteSection handleCallback={fetchList} goodsId={id} visible={deleteVisible} onClose={() => {
        setDeleteVisible(false)
      }}></DeleteSection>
      <TaskDrawer handleCallback={fetchList} goodsId={id} defaultSelectList={list} visible={taskVisible} onClose={() => setTaskVisible(false)}></TaskDrawer>
    </Space >
  );
};

export default connect(({ commodity, loading }) => ({
  loading: loading.effects['liveStreaming/fetchGoodsContent'],
  confirmLoading: loading.effects['liveStreaming/fakeSaveGoodsSection']
}))(Directory);
;
